<template>
  <div class="tube-stats-charts">
    <div ref="speedChartRef" class="chart" style="height: 350px"></div>
    <div ref="timeChartRef" class="chart" style="height: 250px"></div>
  </div>
</template>

<script lang="ts" setup>
  import { computed, onMounted, ref, watch } from 'vue'
  import * as echarts from 'echarts/core'
  import { BarChart, LineChart } from 'echarts/charts'
  import { TitleComponent, TooltipComponent, GridComponent, MarkLineComponent, LegendComponent, DataZoomComponent } from 'echarts/components'
  import { CanvasRenderer } from 'echarts/renderers'

  echarts.use([CanvasRenderer, BarChart, LineChart, TitleComponent, TooltipComponent, GridComponent, MarkLineComponent, LegendComponent, DataZoomComponent])

  //当前视口宽度
  let nowClientWidth = ref(document.documentElement.clientWidth)
  //换算方法
  function nowSize(val: number, initWidth = 1920) {
    return val * (nowClientWidth.value / initWidth)
  }

  interface DataItem {
    time: string
    value: number
  }

  const speedData = [
    { time: '00:00-01:00', value: 587.47 },
    { time: '01:00-02:00', value: 541.35 },
    { time: '02:00-03:00', value: 640.42 },
    { time: '03:00-04:00', value: 598.76 },
    { time: '04:00-05:00', value: 623.15 },
    { time: '05:00-06:00', value: 589.32 },
    { time: '06:00-07:00', value: 612.45 },
    { time: '07:00-08:00', value: 578.91 },
    { time: '08:00-09:00', value: 601.23 },
    { time: '09:00-10:00', value: 634.78 },
    { time: '10:00-11:00', value: 592.34 },
    { time: '11:00-12:00', value: 618.56 },
    { time: '12:00-13:00', value: 645.89 },
    { time: '13:00-14:00', value: 603.21 },
    { time: '14:00-15:00', value: 627.43 },
    { time: '15:00-16:00', value: 591.78 },
    { time: '16:00-17:00', value: 615.92 },
    { time: '17:00-18:00', value: 642.35 },
    { time: '18:00-19:00', value: 599.87 },
    { time: '19:00-20:00', value: 624.19 },
    { time: '20:00-21:00', value: 588.54 },
    { time: '21:00-22:00', value: 612.76 },
    { time: '22:00-23:00', value: 639.09 },
    { time: '23:00-24:00', value: 596.41 },
  ]

  const timeData = [
    { time: '00:00-01:00', value: 2.26 },
    { time: '01:00-02:00', value: 2.43 },
    { time: '02:00-03:00', value: 2.05 },
    { time: '03:00-04:00', value: 2.31 },
    { time: '04:00-05:00', value: 2.18 },
    { time: '05:00-06:00', value: 2.35 },
    { time: '06:00-07:00', value: 2.12 },
    { time: '07:00-08:00', value: 2.28 },
    { time: '08:00-09:00', value: 2.15 },
    { time: '09:00-10:00', value: 2.32 },
    { time: '10:00-11:00', value: 2.09 },
    { time: '11:00-12:00', value: 2.25 },
    { time: '12:00-13:00', value: 2.38 },
    { time: '13:00-14:00', value: 2.22 },
    { time: '14:00-15:00', value: 2.35 },
    { time: '15:00-16:00', value: 2.19 },
    { time: '16:00-17:00', value: 2.33 },
    { time: '17:00-18:00', value: 2.16 },
    { time: '18:00-19:00', value: 2.29 },
    { time: '19:00-20:00', value: 2.13 },
    { time: '20:00-21:00', value: 2.27 },
    { time: '21:00-22:00', value: 2.1 },
    { time: '22:00-23:00', value: 2.24 },
    { time: '23:00-24:00', value: 2.37 },
  ]

  const speedChartRef = ref<HTMLElement | null>(null)
  const timeChartRef = ref<HTMLElement | null>(null)
  let speedChart: echarts.ECharts | null = null
  let timeChart: echarts.ECharts | null = null

  // 生成模拟数据
  const generateTrendData = (baseData: DataItem[], offset: number = 0) => {
    return baseData.map((item) => ({
      time: item.time,
      value: item.value * (1 + offset) + Math.random() * 20 - 10,
    }))
  }

  const speedOption = computed(() => {
    const trendData1 = generateTrendData(speedData, 0.1)
    const trendData2 = generateTrendData(speedData, -0.1)

    return {
      title: {
        text: '套管内起钻速度统计',
        left: 'center',
        textStyle: { color: '#333', fontWeight: 'bold', fontSize: nowSize(16) },
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
        },
      },
      legend: {
        data: ['起钻速度', '趋势线1', '趋势线2'],
        top: 30,
        textStyle: {
          fontSize: nowSize(14),
        },
      },
      grid: { left: 50, right: 30, top: 80, bottom: 40, containLabel: true },
      dataZoom: [
        {
          type: 'slider',
          show: true,
          xAxisIndex: [0],
          start: 0,
          end: 100,
        },
      ],
      xAxis: {
        type: 'category',
        data: speedData.map((d) => d.time),
        axisLabel: {
          color: '#333',
          fontSize: nowSize(14),
        },
      },
      yAxis: {
        type: 'value',
        name: '米/小时',
        nameTextStyle: {
          fontSize: nowSize(14),
        },
        axisLabel: {
          color: '#333',
          fontSize: nowSize(14),
        },
      },
      series: [
        {
          name: '起钻速度',
          type: 'bar',
          data: speedData.map((d) => d.value),
          itemStyle: { color: '#4caf50' },
          label: {
            show: true,
            position: 'top',
            color: '#333',
            fontSize: nowSize(14),
          },
        },
        {
          name: '趋势线1',
          type: 'line',
          data: trendData1.map((d) => d.value),
          smooth: true,
          symbol: 'none',
          lineStyle: {
            type: 'dashed',
            color: '#1890ff',
          },
        },
        {
          name: '趋势线2',
          type: 'line',
          data: trendData2.map((d) => d.value),
          smooth: true,
          symbol: 'none',
          lineStyle: {
            type: 'dashed',
            color: '#ff4d4f',
          },
        },
      ],
      markLine: {
        data: [
          {
            yAxis: 587.47,
            label: {
              formatter: '30% - 587.47',
              fontSize: nowSize(14),
            },
            lineStyle: { color: '#43e143' },
          },
          {
            yAxis: 541.35,
            label: {
              formatter: '50% - 541.35',
              fontSize: nowSize(14),
            },
            lineStyle: { color: '#f7b500' },
          },
          {
            yAxis: 474.47,
            label: {
              formatter: '70% - 474.47',
              fontSize: nowSize(14),
            },
            lineStyle: { color: '#ff4d4f' },
          },
        ],
      },
    }
  })

  const timeOption = computed(() => {
    const trendData1 = generateTrendData(timeData, 0.15)
    const trendData2 = generateTrendData(timeData, -0.15)

    return {
      title: {
        text: '每小时卸扣衔接用时统计',
        left: 'center',
        textStyle: { color: '#333', fontWeight: 'bold', fontSize: nowSize(16) },
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
        },
      },
      legend: {
        data: ['卸扣衔接用时', '趋势线1', '趋势线2'],
        top: 30,
        textStyle: {
          fontSize: nowSize(14),
        },
      },
      grid: { left: 50, right: 30, top: 80, bottom: 40, containLabel: true },
      dataZoom: [
        {
          type: 'slider',
          show: true,
          xAxisIndex: [0],
          start: 0,
          end: 100,
        },
      ],
      xAxis: {
        type: 'category',
        data: timeData.map((d) => d.time),
        axisLabel: {
          color: '#333',
          fontSize: nowSize(14),
        },
      },
      yAxis: {
        type: 'value',
        name: '分钟',
        nameTextStyle: {
          fontSize: nowSize(14),
        },
        axisLabel: {
          color: '#333',
          fontSize: nowSize(14),
        },
      },
      series: [
        {
          name: '卸扣衔接用时',
          type: 'bar',
          data: timeData.map((d) => d.value),
          itemStyle: { color: '#ffd600' },
          label: {
            show: true,
            position: 'top',
            color: '#333',
            fontSize: nowSize(14),
          },
        },
        {
          name: '趋势线1',
          type: 'line',
          data: trendData1.map((d) => d.value),
          smooth: true,
          symbol: 'none',
          lineStyle: {
            type: 'dashed',
            color: '#1890ff',
          },
        },
        {
          name: '趋势线2',
          type: 'line',
          data: trendData2.map((d) => d.value),
          smooth: true,
          symbol: 'none',
          lineStyle: {
            type: 'dashed',
            color: '#ff4d4f',
          },
        },
      ],
      markLine: {
        data: [
          {
            yAxis: 2.26,
            label: {
              formatter: '30% - 2.26',
              fontSize: nowSize(14),
            },
            lineStyle: { color: '#43e143' },
          },
          {
            yAxis: 2.43,
            label: {
              formatter: '50% - 2.43',
              fontSize: nowSize(14),
            },
            lineStyle: { color: '#f7b500' },
          },
        ],
      },
    }
  })

  const initCharts = () => {
    if (speedChartRef.value) {
      speedChart = echarts.init(speedChartRef.value)
      speedChart.setOption(speedOption.value)
    }
    if (timeChartRef.value) {
      timeChart = echarts.init(timeChartRef.value)
      timeChart.setOption(timeOption.value)
    }
  }

  const updateCharts = () => {
    nowClientWidth.value = document.documentElement.clientWidth
    speedChart?.setOption(speedOption.value)
    timeChart?.setOption(timeOption.value)
  }

  onMounted(() => {
    initCharts()
    window.addEventListener('resize', () => {
      updateCharts()
      speedChart?.resize()
      timeChart?.resize()
    })
  })

  watch(() => speedData, updateCharts, { deep: true })
  watch(() => timeData, updateCharts, { deep: true })
</script>

<style scoped>
  .tube-stats-charts {
    width: 100%;
    padding: 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  .chart {
    width: 100%;
    min-width: 0;
  }
</style>
